<template>
  <section class="todoapp">
    <TodoHeader @add="add"></TodoHeader>
    <TodoMain :list="list" @del="del" @change="change" :type="type" @toggleAll="toggleAll"></TodoMain>
    <TodoFooter :list="list" v-if="list.length" @clearDone="clearDone" :type="type" @filter = "filter"></TodoFooter>
  </section>
</template>

<script>
 
import TodoHeader from '@/components/TodoHeader'
import TodoMain from '@/components/TodoMain'
import TodoFooter from '@/components/TodoFooter'

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('todo'))|| [],
      type:'all'  // 把子组件footer里面的变量提升到了父组件App.vue
    }
  },
  methods: {
    // 删除数据的id
    del(id) {
      //对数据过滤
      this.list = this.list.filter((item) => item.id !== id)
    },

    change(id) {
      // 拿到切换状态的id
      // 遍历数组，找到id对应的这一项，然后切换他的状态
      this.list.forEach((item) => {
        if (item.id === id) {
          // 直接把当前数据的idDine属性相反
          item.isDone = !item.isDone
        }
      })
    },
    add(name){
      console.log(name);
      //添加功能逻辑、
      // 如果用户没有填写name,进行弹框显示，return代码
      if (!name){
        alert('请输入内容')
        return
      }
      // 证明用户填写内容了
      this.list.unshift({
        id:Date.now(),
        name,
        isDone: false,
      })
    },
    clearDone(){
      // 清除已完成的项， filter方法
      this.list = this.list.filter(item => !item.isDone)
    },
    filter(type){
      this.type = type
    },
    /**
     * 点击全选按钮,切换所有子项状态
     */
    toggleAll(status){
      this.list.forEach(item => {
        item.isDone = status
      })
    }
  },
   watch:{
    list:{
      // 已经可以拿到变化之后的最新值,存储到本地存储
      handler(newValue){
        localStorage.setItem('todo',JSON.stringify(newValue))
      },
      deep:true, //开启深度监听
    }
   }
}
</script>

<style></style>
